<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>系统管理</el-breadcrumb-item>
      <el-breadcrumb-item>联系我们</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>

        <el-row :gutter="20">
<el-col :span="4">


<el-col :span="5">
              
            <img v-bind:src= "logosrc" alt="Logo" width=200px height=200px>
          </el-col>
        <el-upload
          class="avatar-uploader"
          action="string"
          :http-request="UploadImage"
          :auto-upload="true"
          name="file"
          :show-file-list="false"
          list-type="picture"
          :multiple="false"
          :on-success="uploadSuccess"
          :on-error="uploadError"
          :before-upload="beforeUpload">
          <el-button type="primary"  icon="el-icon-upload el-icon--right"
            >上传照片</el-button>
            
         </el-upload>


      </el-col>
          
        </el-row>
      <el-divider></el-divider>

      <el-row :gutter="20">
          <el-col :span="2">
            <label for="url">网址</label>
          </el-col>
          <el-col :span="7">
        <el-input v-model="nowabout.url" >
          </el-input>
          </el-col>

      </el-row>

      <el-row :gutter="20">
          <el-col :span="2">
            <label for="version">版本</label>
          </el-col>
          <el-col :span="7">
        <el-input v-model="nowabout.version" >
          </el-input>
          </el-col>

      </el-row>
      <el-divider></el-divider>
<el-row :gutter="20">
 <el-col>
        <h1 >功能介绍</h1>
 </el-col>
 <el-col>
        <quill-editor ref="myTextEditor" v-model="nowabout.features" :options="editorOption" style="height:350px;width:900px;margin: 0 auto"></quill-editor>
 </el-col>
    </el-row>
<el-row :gutter="20">
        <h1 ></h1>
      </el-row>

    <el-row :gutter="20">
        <el-col>
        <h1 >法律声明</h1>
 </el-col>
 <el-col>
        <quill-editor ref="myTextEditor" v-model="nowabout.legalNotices" :options="editorOption" style="height:350px;width:900px;margin: 0 auto"></quill-editor>
 </el-col>
    </el-row>
<el-row :gutter="20">
        <h1 ></h1>
      </el-row>

    <el-row :gutter="20">
        <el-col>
        <h1 >平台协议</h1>
 </el-col>
 <el-col>
        <quill-editor ref="myTextEditor" v-model="nowabout.platformAgreement" :options="editorOption" style="height:350px;width:900px;margin: 0 auto"></quill-editor>
 </el-col>
    </el-row>
<el-row :gutter="20">
        <h1 ></h1>
      </el-row>

    <el-row :gutter="20">
        <el-col>
        <h1 >隐私条款</h1>
 </el-col>
 <el-col>
        <quill-editor ref="myTextEditor" v-model="nowabout.privacyPolicy" :options="editorOption" style="height:350px;width:900px;margin: 0 auto"></quill-editor>
 </el-col>
    </el-row>
<el-row :gutter="20">
        <h1 ></h1>
      </el-row>
<el-divider></el-divider>
<el-row type="flex" justify="center">      
  
        <el-button type="primary" @click="updateabout()" icon="el-icon-edit" 
            >确定修改</el-button>

</el-row>
    </el-card>

  </div>
</template>

<script>

import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

import { quillEditor } from 'vue-quill-editor'
  const toolbarOptions = [
    ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
    [{ indent: "-1" }, { indent: "+1" }], // 缩进
    [{ size: ["small", false, "large", "huge"] }], // 字体大小
    [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
    [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
    [{ font: [] }], // 字体种类
    [{ align: [] }], // 对齐方式
    ["clean"], // 清除文本格式

  ];

export default {
  data () {
    return {
      // 查询条件
      // 时间起始

      nowabout: {},
      logosrc:'',
      // 标签列表
      aboutList: [],
      total: 0,
      id:0,

      quillUpdateImg: false,
      editorOption: {
          theme: "snow", // or 'bubble'
          placeholder: '编辑回复内容',

          modules: {
            toolbar: {
              container: toolbarOptions,
              // container: "#toolbar",
              handlers: {
                image: function(value) {
                  if (value) {
                    // 触发input框选择图片文件
                    document.querySelector(".avatar-uploader input").click();
                  } else {
                    this.quill.format("image", false);
                  }
                },

              }
            }
        },
    },

    }
  },
  created () {
    // 加载页面时 加载一次数据
    this.getabout ()
    
  },
  methods: {
  
    //
    async getabout () {
      var { data: res } = await this.$http.get('app/about/')
      if (res.code !== 200) return this.$message.error('Error:' + res.message)
      if(res.code == 200){
          this.nowabout = res.data
      }

      var { data: result } = await this.$http.get('minio/'+this.nowabout.logo)
      console.log(this.nowabout.logo)
      if (result.code !== 200) return this.$message.error('Error:' + result.message)
      this.logosrc = result.data
      
    },

    async getLogoId () {
      var { data: res } = await this.$http.get('minio/'+this.nowabout.logo)
      console.log(this.nowabout.logo)
      if (res.code !== 200) return this.$message.error('Error:' + res.message)
      this.logosrc = res.data
    },

    async updateabout () {
      const { data: res } = await this.$http.post(
        'app/about',
        { 'logo': this.nowabout.logo, 
        'version': this.nowabout.version,
        'url': this.nowabout.url,
        'features': this.nowabout.features,
        'legalNotices': this.nowabout.legalNotices,
        'platformAgreement': this.nowabout.platformAgreement,
        'privacyPolicy': this.nowabout.privacyPolicy
        }, {
          headers: {
            'content-type': 'application/json',
            'X-Request-With': 'XMLHttpRequest',
            'token': window.sessionStorage.getItem('token')
          }
        }
      )
      if (res.code !== 200) return this.$message.error('Error:' + res.message)
      this.showDialogVisible = false

      // this.nowabout = res.data
      // console.log(res.data.records)
    },


//:http-request 使用该指令， :on-success, :on-error 指令是不会触发的
      async UploadImage(param){
      const formData = new FormData()
      formData.append('file', param.file)
      formData.append('kind', 0)
      formData.append('account', "admin")
      formData.append('type', 1)
      const { data: res } = await this.$http.post(
        'minio/upload',
        formData
      )
        if (res.code == 200) {
          console.log(res.data)
            this.nowabout.logo = res.data
             var { data: result } = await this.$http.get('minio/'+this.nowabout.logo)
            if (result.code !== 200) return this.$message.error('Error:' + result.message)
            this.logosrc = result.data

        } else {
          this.$message.error("图片插入失败");
        }
    },
      beforeUpload() {
        // 显示loading动画
       
      },
      uploadSuccess(res, file) {
        
      },
      // 富文本图片上传失败
      uploadError() {
       
      },


  },
  mounted (){
    
  },
  filters: {

  }
}
</script>

<style lang="less" scope>
.el-row {
    margin-top: 20px;
    margin-bottom: 0px;
    &:last-child {
      margin-bottom: 0;
    }
  }
.el-col {
    margin-left: 20px;
    border-radius: 4px;
  }
.grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
.parent{
  display:flex;
  justify-content: center;
  align-items: center;
}
</style>
